<template>
  <div>
    <h2>监控页</h2>

    <button ref="btn" id="myb" @click="increment">{{ count }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },

  methods: {
    // increment() {
    //   /**
    //    * 数据的变化引起真实DOM的更新是需要时间的。异步的。我们立刻获取真实的DOM数据是不OK的。获取到的将是上次的真实DOM数据
    //    *
    //    */
    //   this.count++;
    //   // 尝试获取最新的真实DOM上的数据
    //   // console.log(document.getElementById("myb").innerHTML);
    //   console.log(this.$refs.btn.innerHTML);
    // },

    increment() {
      /**
       * 如果要获取数据变化之后，最新的真实DOM相关的内容，使用
       *  this.$nextTick() 将代码放在它的回调函数中。
       *  $nextTick 与 setTimeout 类似，会延迟执行回调函数，它的触发时机没有时间的控制，而是Vue内部当这次数据更新且真是DOM也更新之后来触发。
       *    相比较使用 setTimeout 而言，$nextTick 更合适。是有Vue内部控制的微任务队列去操控。
       */
      this.count++;

      // setTimeout(() => {
      //   console.log(this.$refs.btn.innerHTML);
      // });

      this.$nextTick(() => {
        console.log(this.$refs.btn.innerHTML);
      });
    },
  },
};
</script>
